/*快捷操作*/


.bor-red{border: 1px solid red;}
.bor-gray{border: 1px solid gray;}
.bor-blue{border: 1px solid blue;}
.bor-dark{border: 1px solid #942699;}

.br1{border: 1px solid #615b5b;}
.br2{border: 1px solid #72e237;}
.br3{border: 1px solid #2812ef;}
.br4{border: 1px solid #2cbde2;}
.br5{border: 1px solid #151515;}

/*边框*/
.bor-t{border-top: 1px solid red;}
.bor-b{border-bottom: 1px solid #6f419e;}
.bor-l{border-left: 1px solid #20e2cb;}
.bor-r{border-right: 1px solid #eaae17;}

/*圆点*/
.bor-dot-t{border-top: 1px dotted red;}
.bor-dot-b{border-bottom: 1px dotted #6f419e;}
.bor-dot-l{border-left: 1px dotted #20e2cb;}
.bor-dot-r{border-right: 1px dotted #eaae17;}

/*虚线*/
.bor-das-t{border-top: 1px dashed red;}
.bor-das-b{border-bottom: 1px dashed #6f419e;}
.bor-das-l{border-left: 1px dashed #20e2cb;}
.bor-das-r{border-right: 1px dashed #eaae17;}


.bg-grey{background-color: grey}
.bg-white{background-color: white}

.bg{background-color: grey}
.bg1{background-color: #1738e2}
.bg2{background-color: #48c3ff}
.bg3{background-color: #942699}
.bg4{background-color: #cc7832}

.mt-5{margin-top: 5px;}
.mt-10{margin-top: 10px;}
.mt-15{margin-top: 15px;}
.mt-20{margin-top: 20px;}
.mt-25{margin-top: 25px;}
.mt-30{margin-top: 30px;}
.mt-35{margin-top: 35px;}

.mb-5{margin-bottom: 5px;}
.mb-10{margin-bottom: 10px;}
.mb-15{margin-bottom: 15px;}
.mb-20{margin-bottom: 20px;}
.mb-25{margin-bottom: 25px;}
.mb-30{margin-bottom: 30px;}
.mb-35{margin-bottom: 35px;}

.ml-5{margin-left: 5px;}
.ml-10{margin-left: 10px;}
.ml-15{margin-left: 15px;}
.ml-20{margin-left: 20px;}
.ml-25{margin-left: 25px;}
.ml-30{margin-left: 30px;}
.ml-35{margin-left: 35px;}

.mr-5{margin-right: 5px;}
.mr-10{margin-right: 10px;}
.mr-15{margin-right: 15px;}
.mr-20{margin-right: 20px;}
.mr-25{margin-right: 25px;}
.mr-30{margin-right: 30px;}
.mr-35{margin-right: 35px;}


.pd-10{padding: 10px;}
.pd-15{padding: 15px;}
.pd-20{padding: 20px;}
.pd-25{padding: 25px;}
.pd-30{padding: 30px;}
.pd-35{padding: 35px;}


.pt-10{padding-top: 10px;}
.pt-15{padding-top: 15px;}
.pt-20{padding-top: 20px;}
.pt-25{padding-top: 25px;}
.pt-30{padding-top: 30px;}
.pt-35{padding-top: 35px;}

.pb-10{padding-bottom: 10px;}
.pb-15{padding-bottom: 15px;}
.pb-20{padding-bottom: 20px;}
.pb-25{padding-bottom: 25px;}
.pb-30{padding-bottom: 30px;}
.pb-35{padding-bottom: 35px;}

.pl-10{padding-left: 10px!important;}
.pl-15{padding-left: 15px;}
.pl-20{padding-left: 20px!important;}
.pl-25{padding-left: 25px;}
.pl-30{padding-left: 30px!important;}
.pl-35{padding-left: 35px;}

.pr-10{padding-right: 10px!important;}
.pr-15{padding-right: 15px;}
.pr-20{padding-right: 20px!important;}
.pr-25{padding-right: 25px;}
.pr-30{padding-right: 30px!important;}
.pr-35{padding-right: 35px;}


.grid-2{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-gap:3%;
  grid-row-gap: 15px;
}
.grid-3{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap:10px;
  grid-row-gap: 15px;
}
.grid-4{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-gap:15px;
  grid-row-gap: 15px;
}
.grid-append-btn{
  display: grid;
  grid-template-columns: 1fr 80px;
  grid-gap:15px;
  grid-row-gap: 15px;
  align-items: center;
  .el-form-item{margin: 0;}
}
.grid-append-icon{
  display: grid;
  grid-template-columns: 1fr 30px;
  grid-gap:15px;
  grid-row-gap: 15px;
  align-items: center;
  .el-form-item{margin: 0;}
}


/*布局-flex子级排列方式*/
.flex-row-2{display: flex;align-items: center;justify-content: space-between;}
.flex-row-2>div{width: 45%;}

.flex-row-3{display: flex;align-items: center;justify-content: space-between;}
.flex-row-3>div{width: 32%;}

.flex-row-4{display: flex;align-items: center;justify-content: space-between;}
.flex-row-4>div{width: 22%;}


/*布局-flex布局方式*/
.flex-jc{
  display: flex;
  align-items: center;
  justify-content : flex-start;
  .el-form-item{margin-bottom: 0;}
}
.flex-fe{
  display: flex;
  align-items: center;
  justify-content : flex-start;
  .el-form-item{margin-bottom: 0;}
}
.flex-jcc{
  display: flex;
  align-items: center;
  justify-content : center;
  .el-form-item{margin-bottom: 0;}
}
.flex-sa{
  display: flex;
  align-items: center;
  justify-content : space-around;
  .el-form-item{margin-bottom: 0;}
}
.flex-sb{
  display: flex;
  align-items: center;
  justify-content : space-between;
  .el-form-item{margin-bottom: 0;}
}

.flex-ct{display: flex;align-items: center;}
.flex-je{display: flex;align-items: center;justify-content: flex-end;}
.flex-jsb{display: flex;align-items: center;justify-content: space-between;}
.flex-items-center{display: flex;align-items: center;}
.flex{display: flex;}
.flex-row{display: flex;flex-direction: row;align-items: center;}
.flex-column{display: flex;flex-direction: column;}
.flex-column-c{display: flex;flex-direction: column;align-items:center;}


.w-h-100{
  width: 100%;
  height: 100%;
}


/*
  字体大小
  xs-超小屏幕-手机;
  sm-小屏幕-平板;
  md-中等屏幕-桌面显示器;
  lg-大屏幕-大桌面显示器;
*/
.font-xs{font-size: 12px;}
.font-sm{font-size: 14px;}
.font-md{font-size: 16px;}
.font-lg{font-size: 18px;}
.block{display: block;}


.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}

.form-item-align-b{align-items: baseline;}

/*字体隐藏*/
.hid-font{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.hid-font-2{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.hid-font-3{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}

/*禁止复制文字*/
.text-copy-no{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/*图片,鼠标移上图片由中心变大,宽高具体地方定义*/
.img-hover-grow{overflow: hidden;}
.img-hover-grow>img{display: block;width: 100%;height: 100%;transition: all 1s;}
.img-hover-grow>img:hover{transform: scale(1.4);}

/*防止图片拖动*/
img {border: 0;vertical-align: middle;}

/*当img没有接收到src属性时会自动出现边框，去掉这个边框*/
img[src=" "],img:not([src]){opacity:0;}


/*鼠标效果*/
.hover-mouse-po{cursor: pointer;} /*手指*/
.hover-mouse-grab{cursor: grab;} /*手掌*/
.hover-mouse-wait{cursor: wait;} /*类似QQ浏览器图标-加载状态*/
.hover-mouse-cell{cursor: cell;} /*十字架*/
.hover-mouse-resize{cursor: col-resize;} /*结构可左右拖动*/
.cursor-p{cursor: pointer;}

.text-strikethrough {
  text-decoration: line-through;
}

.text-bold {
  font-weight: 700;
}
.text-italic {
  font-style: italic;
}

.text-decoration {
  text-decoration: underline;
}

.text-strikethrough {
  text-decoration: line-through;
}

.overflow-auto{overflow: auto}
.overflow-hidden{overflow: hidden;}
.text-hidden{overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
.text-align-l{text-align: left;}
.text-align-c{text-align: center;}
.text-align-r{text-align: right;}
